<template>
  <div :style="{backgroundColor: bgColor}"
    class="tw-aiclass-score">
    <template v-if="data.length===2" >
    <!-- <div> -->
      <div class="tw-aiclass-score-item">
        <div class="xscore">
            <div class="">
              <img src="@assets/bigha.png" v-if="data[0].isok"/>
              <img src="@assets/bigku.png" v-else/>
            </div>
            <div class="xvalue">{{data[0].value}}</div>
        </div>
        <div class="xlabel">{{data[0].name}}</div>
      </div>
      <div :style="{position: 'absolute', top:positionTop, right:positionRight}">
        <span style="xlabel">{{data[1].name}}</span>
        <span class="xscore" style="padding: 0 5px; font-size: 18px">{{data[1].value}}</span>
        <img style="margin-top: -5px;" src="@assets/smallha.png" v-if="data[1].isok"/>
        <img style="margin-top: -5px;" src="@assets/smallku.png" v-else/>
      </div>
    <!-- </div> -->
    </template>
    <template v-else-if="data.length>0" >
    <div class="tw-aiclass-score-item" v-for="(item,index) in data" :key="index">
      <div class="xscore">
        <template v-if="data.length === 1">
          <div class="">
            <img src="@assets/bigha.png" v-if="item.isok"/>
            <img src="@assets/bigku.png" v-else/>
          </div>
          <div class="xvalue">{{item.value}}</div>
        </template>
        <template v-else>
          <span class="">{{item.value}}</span>
          <span v-if="index===0" style="padding-left:5px">
          <img :style="{marginTop: imgMargin}" src="@assets/smallha.png" v-if="item.isok"/>
          <img :style="{marginTop: imgMargin}" src="@assets/smallku.png" v-else/>
        </span>
        </template>
      </div>
      <div class="xlabel">{{item.name}}</div>
    </div>
    </template>
    <tw-lib-nodata v-show="data.length===0" />
  </div>
</template>

<script>
import nodata from '../tw-lib-base/no-data/no-data'
const props = require('./props')

export default {
  name: 'web-aiclass-score',
  mixins: [nodata],

  props,

  data() {
    return {
      listData: []
    }
  },

  computed: {
    style () {
      return {
        scorecolor: this.scorecolor,
        scoreFontSize: this.scoreFontSize,
        marginTop: this.marginTop,
        lineMargin: this.lineMargin,
        labelcolor: this.labelcolor,
        labelFontSize: this.labelFontSize
      }
    }
  },

  methods: {
    init () {
      if (this.data.length > 0) {
        this.setStyle()
      }
    },
    setStyle () {
      const style = `
        ::root.tw-aiclass-score .tw-aiclass-score-item {
          margin-top: ${this.lineMargin};
        }

        ::root.tw-aiclass-score .xscore {
          color:  ${this.scorecolor};
          font-size: ${this.scoreFontSize};
        }

        ::root.tw-aiclass-score .xlabel {
          color:  ${this.labelcolor};
          font-size: ${this.labelFontSize};
          margin-top: ${this.marginTop};
        }

        ::root.tw-aiclass-score .xvalue {
          color:  ${this.scorecolor};
          font-size: ${this.scoreFontSize};
          margin-top: ${this.marginTop};
        }
      `

      this.addStyle(style)
    },

    addStyle (style) {
      this.$el.classList.add(`x${this._uid}`)
      const styleEl = document.getElementById(this._uid) || document.createElement('style')
      styleEl.id = this._uid
      styleEl.innerText = style.replace(/::root/gm, `.x${this._uid}`).replace(/\n/gm, '')

      document.head.appendChild(styleEl)
    }
  },

  mounted () {
    this.init()
  },

  beforeDestroy () {
  },

  watch: {
    data: {
      deep: true,
      handler () {
        this.init()
      }
    },
    style: {
      deep: true,
      handler () {
        this.setStyle()
      }
    }
  }
}
</script>

<style lang="scss">
  @import './css/index.scss';
</style>
